{include file='public/header'}
<style>
	.pre1{
		text-align: center;
		width: 94%;
		position: absolute;
		margin-top: -75px;
	}
	.pre2{
		background-color: rgba(255,255,255,.5); padding: 5px; border-radius: 5px; width: 45%;margin: 0px auto;
	}

	.pre3{
		color: #000;font-size: 1rem;font-weight: bold;margin-bottom: 5px;
	}
	.pre4{
		color: #000;
	}
	.pre5{
		display: inline-block;padding: 1px 5px;border-radius: 3px;background: #000;color: #fff;font-size: 0.9rem;
	}
</style>
<script>
	function b(){
		t = parseInt(x.css('top'));
		y.css('top','19px');
		x.animate({top: t - 19 + 'px'},'slow');	//19为每个li的高度
		if(Math.abs(t) == h-19){ //19为每个li的高度
			y.animate({top:'0px'},'slow');
			z=x;
			x=y;
			y=z;
		}
		setTimeout(b,3000);//滚动间隔时间 现在是3秒
	}
	$(document).ready(function(){
		$('.swap').html($('.news_li').html());
		x = $('.news_li');
		y = $('.swap');
		h = $('.news_li li').length * 19; //19为每个li的高度
		setTimeout(b,3000);//滚动间隔时间 现在是3秒

	})

</script>
<body>
<div class="section_t">
	<div class="left clearfix">
		<img src="__PUBLIC__/home/images/a2.png" alt="">
		<form action="{:url('Goods/search')}">
		<input type="search" name="keywords" class="input1" placeholder="查找商品">
		</form>
	</div>
	<div class="right clearfix">
		<a href="javascript:;" class="a1">
			<img src="__PUBLIC__/home/images/a4.png" alt="">
			<span class="s1" id="sign">签到</span>
		</a>
		{include file='public/tips'}
	</div>
</div>
<!-- 轮播图 -->
<div class="index_section1">
	<div class="ppp">
		<div class="swiper-container" id="mm">
			<div class="swiper-wrapper">
				{foreach $swiper_list as $swiper}
				<div class="swiper-slide"><a href="{:getLinkUrl($swiper.type, $swiper.link_url)}"><img src="{$swiper.img_url}" alt=""></a></div>
				{/foreach}
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
</div>
<!-- 分类 -->
<div class="index_section2">
	<div class="container">
		<div class="title">
			<p class="p1">
				<span class="s1">建材分类</span>
				<span class="s2">批发建材就上一成建材</span>
			</p>
		</div>
		<div class="center">
			<div class="swiper-container" id="tt">
				<div class="swiper-wrapper">
					{foreach $category_list as $cate_page}
					<div class="swiper-slide">
						<ul class="clearfix">
							{foreach $cate_page as $cate_item}
							<li>
								<a href="{:url('Goods/index', ['cate_id'=>$cate_item.id])}">
									<img src="{$cate_item.img_url}" alt="">
									<p class="p1">{$cate_item.title}</p>
								</a>
							</li>
							{/foreach}
						</ul>
					</div>
					{/foreach}
				</div>
				<div class="swiper-pagination" style="bottom: -5px;"></div>
			</div>

		</div>
	</div>
</div>
<!-- 滚动新闻 -->
<div class="index_section3">
	<div class="container clearfix">
		<div class="a1">
			<img src="__PUBLIC__/home/images/a9.png" alt="">
		</div>
		<div class="a2">
			<div class="ko">
				<ul class="news_li">
					{foreach $notice as $n_item}
					<li class="chao"><a href="{:url('Notice/detail', ['notice_id'=>$n_item.id])}" >{$n_item.title}</a></li>
					{/foreach}
				</ul>
				<ul class="swap"></ul>
			</div>
		</div>
		<div class="a3">
			<a href="{:url('Notice/index')}">更多</a>
		</div>
	</div>
</div>
<div class="ge"></div>
<!-- 预售专区 -->
<div class="index_section4">
	<div class="container">
		<div class="title">
			<img src="__PUBLIC__/home/images/apre.png" alt="">
		</div>
		<div class="center">
			{foreach $presell as $pre}
			<a href="{:url('Goods/index', ['presell_id'=>$pre.id])}">
				<img src="{$pre.img_url}" alt="" style="height: 120px;">
				<div class="pre1">
					<div class="pre2">
					<p class="pre3">{$pre.title}</p>
					<span class="pre4" data-end_time="{$pre.end_time}" id="pre-{$pre.id}">
						<span class="pre-day pre5">0</span>
						天
						<span class="pre-hour pre5">0</span>
						:
						<span class="pre5 pre-min">0</span>
						:
						<span class="pre5 pre-sec">0</span>
					</span>
					</div>
				</div>
			</a>
			{/foreach}
		</div>
	</div>
</div>
<div class="ge"></div>
<!-- 品牌区 -->
<div class="index_section4">
	<div class="container">
		<div class="title">
			<img src="__PUBLIC__/home/images/a10.png" alt="">
		</div>
		<div class="center">
			{foreach $brand_list as $brand_item}
			<a href="{:url('Goods/index', ['brand_id'=>$brand_item.id])}">
				<img src="{$brand_item.img_url}" alt="" style="height: 120px;">
			</a>
			{/foreach}
		</div>
	</div>
</div>

<!-- 热卖推荐 -->
<div class="ge"></div>
<div class="index_section5">
	<div class="container">
		<div class="title">
			<img src="__PUBLIC__/home/images/a12.png" alt="" class="im1">
			<a href="{:url('Goods/hotIndex')}">
				<img src="__PUBLIC__/home/images/a13.png" alt="" class="im2">
			</a>
		</div>
		<div class="center">
			<ul class="clearfix">
				{foreach $hot_list as $h_item}
				<li>
					<a href="{:url('Goods/detail', ['good_id'=>$h_item.id])}">
						<div class="big">
							<div class="logo">
								<img src="{$h_item.img_url}" alt="">
							</div>
							<div class="list">
								<p class="p1 chao2">
									<span class="s1">{$h_item.brand_title}</span>
									<span class="s2">{$h_item.title}</span>
								</p>
								<p class="p2">
									<span class="s1">{$h_item.price}</span>
								</p>
							</div>
						</div>
					</a>
				</li>
				{/foreach}
			</ul>
		</div>
	</div>
</div>

{include file="public/sign_day"}

{include file='public/tabbar'}
<div class="service-div" onclick="javascript:location.href='{:url(\'Chat/index\')}'">
	<img class="service-img" src="__PUBLIC__/home/images/service.png" alt="">
</div>
<style>
	.service-div{
		width: 35px;
		height: 35px;
		position: fixed;
		bottom: 57px;
		right: 15px;
		border: 1px solid red;
		border-radius: 100%;
		background-color: rgba(255,255,255,.5);
		text-align: center;
	}
	.service-img{
		width: 30px;
	}

</style>

</body>
<script>
	var swiper = new Swiper('#mm', {
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
			delay: 2000,
			disableOnInteraction: false,
		},
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
	});
</script>
<script>
	var swiper = new Swiper('#tt', {
		spaceBetween: 0,
		centeredSlides: true,
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
	});
</script>
<script>
	$(function(){
		$("#sign").click(function () {
			$("#sign_div").show();
		})
		$(".pre4").each(function (i,v) {
			countDown("#"+$(v).attr("id"), $(v).data("end_time")*1000);
		})
	})
	
	function sign() {
		$.post("{:url('User/sign')}", null, function (res) {
			modal.msg(res.result_info);
			if(res.result_code == "1111"){
				location.href="{:url('Index/login')}";
			}
			if(res.result_code == 0){
				$("#sign_div").find(".last .a1").text("已签到");
				$("#sign_div").find(".last .a1").removeAttr("onclick");

				$.each($("#sign_div").find("li"), function (i, v) {
					if(!$(v).hasClass("select")){
						$(v).addClass("select");
						$(v).find("img").toggle();
						return false;
					}
				})
			}
		});
	}
</script>
<script type="text/javascript">
	function countDown(obj,endTime){
		var time_start = new Date().getTime(); //设定当前时间
		var time_end =  parseInt(endTime); //设定目标时间
		// 计算时间差
		var time_distance = time_end - time_start;
		// 天
		var int_day = Math.floor(time_distance/86400000);
		time_distance -= int_day * 86400000;
		// 时
		var int_hour = Math.floor(time_distance/3600000);
		time_distance -= int_hour * 3600000;
		// 分
		var int_minute = Math.floor(time_distance/60000);
		time_distance -= int_minute * 60000;
		// 秒
		var int_second = Math.floor(time_distance/1000);
		// 时分秒为单数时、前面加零
		if(int_day < 10 && int_day > 0) {
			int_day = "0" + int_day;
		}
		if(int_hour < 10){
			int_hour = "0" + int_hour;
		}
		if(int_minute < 10){
			int_minute = "0" + int_minute;
		}
		if(int_second < 10){
			int_second = "0" + int_second;
		}
		if(int_day<0 || int_hour<0 || int_minute <0 || int_second<0){
			$(obj).html("已到时间");
			return false;
		}
		if(int_day<=0 && int_hour<=0 && int_minute <=0 && int_second<=0){
			$(obj).html("已到时间");
			return false;
		}
		// 显示时间
		var result = '<span class="pre-day pre5">'+parseInt(int_day)+'</span>\n' +
				'\t\t\t\t\t\t天\n' +
				'\t\t\t\t\t\t<span class="pre-hour pre5">'+int_hour+'</span>\n' +
				'\t\t\t\t\t\t:\n' +
				'\t\t\t\t\t\t<span class="pre5 pre-min">'+int_minute+'</span>\n' +
				'\t\t\t\t\t\t:\n' +
				'\t\t\t\t\t\t<span class="pre5 pre-sec">'+int_second+'</span>';
		$(obj).html(result);
		// 设置定时器
		setTimeout("countDown("+"'"+obj+"'"+","+endTime+")",1000);
	}
</script>
</html>